<template>
  <div class="main-bg">
<!--    <div class="main-tabs">-->
<!--      <div class="tabs" @click="toPage()">点赞</div>-->
<!--      <div class="tabs" @click="toPage()">反对</div>-->
<!--      <div class="tabs" @click="toPage()">评论</div>-->
<!--      <div class="tabs" @click="toPage()">收藏</div>-->
<!--      <div class="tabs" @click="toPage()">xx</div>-->
<!--    </div>-->
    <QuestionCard v-if="this.queryType === nameMapping.QUESTION"></QuestionCard>
    <AnswerCard v-if="this.queryType === nameMapping.ANSWER"></AnswerCard>
    <EssayCard v-if="this.queryType === nameMapping.ESSAY"></EssayCard>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import QuestionCard from "@/components/QuestionCard.vue";
import * as nameMapping from "@/settings/nameMapping"
import AnswerCard from "@/components/AnswerCard";
import EssayCard from "@/components/EssayCard";

export default defineComponent({
  name: "MainBox",
  components: {QuestionCard, AnswerCard, EssayCard},
  data() {
    return {
      nameMapping: nameMapping
    };
  },
  methods: {

  },
  computed: {
    queryType() {
      return this.$store.state.queryType;
    },
  },

});
</script>

<style scoped>



.main-bg {
  background-color: #ffffff;
  width: 70%;
  box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
  /*height: 100vh;*/
  height: auto;
  margin: 20px auto 0 auto;
}

.main-tabs {
  display: flex;
  border-bottom: #ececec 2px solid;
  height: 8vh;
}

.tabs {
  /*margin: 20px 30px;*/
  padding: 20px 30px;
}

.tabs:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
}
</style>
